<template>
    <div draggable="false" :style="{
            left: (box.x - 1) + 'px',
            top: (box.y - 1) + 'px',
            width: (box.width + 2) + 'px',
            height: (box.height + 2) + 'px'
        }" class="extent" :id="window.getRootName() + 'EXTENT'">
        <div class="panel"></div>
    </div>
</template>

<script>
export default {
    props: {
        box: {
            type: Object
        }
    },
    data() {
        return {
            window: window
        };
    },
    created() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.extent {
    border: 1px dotted #ff9100;
    position: absolute;
    z-index: 1000000;
    &:hover {
        cursor: default;
    }
}
.panel {
    background-color: #cccccc;
    opacity: 0.2;
    width: 100%;
    height: 100%;
}
</style>